<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Event Utility: Skinning via Progressive Enhancement using the Event Utility and the YUILoader</title>
    

    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	.yui-checkboxes-loading #checkboxes {
		display: none;
	}

</style>

<script type="text/javascript">

	//	Hide the checkboxes if JavaScript is enabled to prevent 
	//	the user from seeing a flash of unstyled content while
	//	the JavaScript for the checkboxes is being loaded.
	document.documentElement.className = "yui-checkboxes-loading";

</script>
<!--end custom header content for this example-->


<script type="text/javascript">
//enable passthrough of errors from YUI Event:
if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {
	YAHOO.util.Event.throwErrors = true;
}
</script>
</head>
<body id="yahoo-com" class="yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p><em><a href="http://developer.yahoo.com/yui/">YUI Library Home</a></em></p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
		<input name="vs" type="hidden" value="developer.yahoo.com">
		<input name="vs" type="hidden" value="yuiblog.com">
		<div id="sitesearch">
			<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			<input type="text" id="searchinput" name="p">
			<input type="submit" value="Search" id="searchsubmit" class="ygbt">
		</div>
		</form>	</div>
	<div id="ygma"><a href="../../"><img src="../../assets/yui.gif"  border="0" height="38"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Event Utility: Skinning via Progressive Enhancement using the Event Utility and the YUILoader</h1></div>
</div>
<div id="bd">
	
	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example">

    
	<div class="promo">
	<h1>Event Utility: Skinning via Progressive Enhancement using the Event Utility and the YUILoader</h1>
	
	<div class="exampleIntro">
	<p>
Using Progressive Enhancement to skin checkboxes with the help of the YUILoader 
and the Event Utility's <code>focus</code> and <code>blur</code> events and the 
<code>delegate</code> method.
</p>			
	</div>	
					
	<div class="example-container module ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="event-focus-blur_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->		
		</div>		<div id="example-canvas" class="bd">
	
		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="checkboxes">
	<div>
		<label for="field-1">Field 1: </label>
		<span>
			<span>
				<input type="checkbox" id="field-1" name="field-1" value="1">
			</span>
		</span>
	</div>
	<div>
		<label for="field-2">Field 2: </label>
		<span>
			<span>
				<input type="checkbox" id="field-2" name="field-2" value="2">
			</span>
		</span>
	</div>
	<div>
		<label for="field-3">Field 3: </label>
		<span>
			<span>
				<input type="checkbox" id="field-3" name="field-3" value="3">
			</span>
		</span>
	</div>			
</div>

<script type="text/javascript">

	(function () {

		//	Use the YUILoader to load the JavaScript and CSS required for 
		//	skinning the checkboxes.

		var loader = new YAHOO.util.YUILoader({
		
		    require: ["event-delegate"],
		    loadOptional: true,
			base: '../../build/',
		    timeout: 10000,
			onFailure: function () {

				//	Show the checkboxes if the loader failed that way the original 
				//	unskinned checkboxes will be visible so that the user can
				//	interact with them either way.		

				document.documentElement.className = "";
				
			}
		
		});

		loader.addModule({		
			name: 'checkboxstyles',
			type: 'css',
			varName: "CheckboxCSS",
			fullpath: 'assets/checkbox.css'
		});

		loader.addModule({		
			name: 'checkboxjs',
			type: 'js',
			varName: "CheckboxJS", 
			fullpath: 'assets/checkbox.js'
		});

	    loader.require(["checkboxstyles", "checkboxjs"]);
		
		loader.insert();
		
	}());

</script>


	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
		
	
	</div>			
	</div>
		
	<h3>Challenges</h3>
<p>
There are a few challenges when trying to skin an HTML checkbox using CSS.  To start, most of the 
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a> don't provide
support for CSS properties like <code>border</code> and <code>background</code> on the 
<code>&#60;input type="checkbox"&#62;</code> element.  Additionally, IE 6 and IE 7 (Quirks Mode) 
lack support for attribute selectors &#151; necessary to style the <code>checked</code> and 
<code>disabled</code> states.  Additionally, IE 6 and 7 only support the <code>:focus</code> and 
<code>:active</code> pseudo classes on <code>&#60;a&#62;</code> elements, both of which are needed 
to style a checkbox when it is focused or depressed.
</p>

<h3>Approach</h3>
<p>
Despite the shortcomings in cross-browser CSS support, with a little extra markup and through the use of 
JavaScript it is possible to skin an <code>&#60;input type="checkbox"&#62;</code> element 
consistently well in all of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#a-grade">A-grade browsers</a>.
</p>

<h4>Markup</h4>
<p>
Since CSS support for the <code>&#60;input type="checkbox"&#62;</code> element is lacking, wrap 
<code>&#60;input type="checkbox"&#62;</code> elements in one or more inline elements to provide the 
necessary hooks for styling.  In this example, each <code>&#60;input type="checkbox"&#62;</code> 
element is wrapped by two <code>&#60;span&#62;</code>s.
</p>

<textarea name="code" class="HTML" cols="60" rows="1">
<span>
	<span>
		<input type="checkbox">
	</span>
</span>
</textarea>

<h4>CSS</h4>
<p>
To style each checkbox, a class name of <code>yui-checkbox</code> will be applied to the 
outtermost <code>&#60;span&#62;</code> wrapping each <code>&#60;input type="checkbox"&#62;</code> 
element.  An additional class will be used to represent the various states of each checkbox.  The 
class name for each state will follow a consistent pattern: <code>yui-checkbox-[state]</code>.  
For this example, the following state-based class names will be used:
</p>
<dl>
	<dt><code>yui-checkbox-focus</code></dt>
	<dd>The checkbox has focus</dd>
	<dt><code>yui-checkbox-active</code></dt>
	<dd>The checkbox is active (pressed)</dd>
	<dt><code>yui-checkbox-checked</code></dt>
	<dd>The checkbox is checked</dd>	
</dl>
<p>
The styles for each checkbox comes together as follows:
</p>

<textarea name="code" class="CSS" cols="60" rows="1">
.yui-checkbox {

	display: -moz-inline-stack;	/* Gecko < 1.9, since it doesn't support "inline-block" */
	display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
	width: 10px;
	height: 10px;
	border: inset 2px #999;
	background-color: #fff;	/*	Need to set a background color or IE won't get mouse events	*/

	/*
		Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since 
		they don't support use of negative margins without relative positioning.  
	*/

	_position: relative;
}

.yui-checkbox span {

	display: block;
	height: 14px;
	width: 12px;
	overflow: hidden;

	/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
	margin: -5px 0 0 1px;
	

	/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
	_margin: 0;
	_position: absolute;
	_top: -5px;
	_left: 1px;
	
}

/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui-checkbox span:after {

	content: ".";
	visibility: hidden;
	line-height: 2;

}

/*
	Hide the actual checkbox offscreen so that it is out of view, but still accessible via 
	the keyboard. 
*/
.yui-checkbox input {

	position: absolute;
	left: -10000px;

}

.yui-checkbox-focus {

	border-color: #39f;
	background-color: #9cf;

}

.yui-checkbox-active {

	background-color: #ccc;

}

.yui-checkbox-checked span {

	/* Draw a custom checkmark for the checked state using a background image. */
	background: url(checkmark.png) no-repeat;

}
</textarea>

<h4>JavaScript</h4>

<p>
Application and removal of the state-based class names will be facilitated by JavaScript event 
handlers.  Each event handler will track the state of the 
<code>&#60;input type="checkbox"&#62;</code> element, and apply and remove corresponding 
state-based class names from its outtermost <code>&#60;span&#62;</code> &#151; 
making it easy to style each state.  And since each JavaScript is required for state management, 
the stylesheet for the skinned checkboxes will only be added to the page when JavaScript is
enabled.  This will ensure that each checkbox works correctly with and without JavaScript enabled.
</p>

<p>
Since there could easily be many instances of a skinned checkbox on the page, all event 
listeners will be attached to the containing element for all checkboxes.  Each listener will 
listen for events as they bubble up from each checkbox.  Relying on event bubbling will improve the 
overall performance of the page by reducing the number of event handlers.
</p>

<p>
Since the DOM <code>focus</code> and <code>blur</code> events do not bubble, use the Event Utility's 
specialized <code>focusin</code> and <code>focusout</code> events as an alternative to 
attaching discrete focus and blur event handlers to the <code>&#60;input type="checkbox"&#62;</code>
element of each skinned checkbox.  The specialized <code>focusin</code> and 
<code>focusout</code> events make it possible to attach a single focus and blur event 
listener on the containing element of each checkbox &#151; thereby increasing the performance 
of the page.  The complete script for the example comes together as follows:
</p>

<textarea name="code" class="JScript" cols="60" rows="1">
(function () {

	var Event = YAHOO.util.Event,
		Dom = YAHOO.util.Dom,
		Selector = YAHOO.util.Selector,
		UA = YAHOO.env.ua,

		bKeyListenersInitialized = false,
		bMouseListenersInitialized = false,
		sCheckboxFocusClass = "yui-checkbox-focus",
		sCheckboxCheckedClass = "yui-checkbox-checked",
		sCheckboxActiveClass = "yui-checkbox-active",
		forAttr = (UA.ie && UA.ie < 8) ? "htmlFor" : "for",
		bBlockDocumentMouseUp = false,
		bBlockClearActive = false,
		bBlockBlur = false,
		oActiveCheckbox;			


	var initKeyListeners = function () {

		Event.delegate(this, "keydown", onCheckboxKeyDown, ".yui-checkbox");
		Event.delegate(this, "click", onCheckboxClick, ".yui-checkbox");
		Event.delegate(this, "focusout", onCheckboxBlur, "input[type=checkbox]");

		bKeyListenersInitialized = true;

	};


	var initMouseListeners = function () {

		Event.delegate(this, "mouseover", onCheckboxMouseOver, ".yui-checkbox");
		Event.delegate(this, "mouseout", onCheckboxMouseOut, ".yui-checkbox-active");
		Event.on(this.ownerDocument, "mouseup", onDocumentMouseUp);

		bMouseListenersInitialized = true;

	};


	var getCheckbox = function (node) {

		return (Dom.hasClass(node, "yui-checkbox") ? node: 
					Dom.getAncestorByClassName(node, "yui-checkbox"));

	};


	var getCheckboxForLabel = function (label) {

		var sID = label.getAttribute(forAttr),
			oInput,
			oCheckbox;

		if (sID) {

			oInput = Dom.get(sID);

			if (oInput) {
				oCheckbox = getCheckbox(oInput);
			}

		}

		return oCheckbox;

	};


	var updateCheckedState = function (input) {

		var oCheckbox = getCheckbox(input);

		if (input.checked) {
			Dom.addClass(oCheckbox, sCheckboxCheckedClass);
		}
		else {
			Dom.removeClass(oCheckbox, sCheckboxCheckedClass);
		}

	};


	var setActiveCheckbox = function (checkbox) {

		Dom.addClass(checkbox, sCheckboxActiveClass);
		oActiveCheckbox = checkbox;

	};


	var clearActiveCheckbox = function () {

		if (oActiveCheckbox) {
			Dom.removeClass(oActiveCheckbox, sCheckboxActiveClass);
			oActiveCheckbox = null;
		}

	};


	var onCheckboxMouseOver = function (event, matchedEl) {

		if (oActiveCheckbox === matchedEl) {
			Dom.addClass(oActiveCheckbox, sCheckboxActiveClass);
		}

	};


	var onCheckboxMouseOut = function (event, matchedEl) {

		Dom.removeClass(matchedEl, sCheckboxActiveClass);

	};				


	var onDocumentMouseUp = function (event) {

		var oCheckbox;

		if (!bBlockDocumentMouseUp) {

			oCheckbox = getCheckbox(Event.getTarget(event));

			if ((oCheckbox && oActiveCheckbox !== oCheckbox) || !oCheckbox) {
				clearActiveCheckbox();
			}

		}

		bBlockDocumentMouseUp = false;

	};


	var onCheckboxFocus = function (event, matchedEl, container) {

		//	Remove the focus style from any checkbox that might still have it

		var oCheckbox = Selector.query(".yui-checkbox-focus", "checkboxes", true);

		if (oCheckbox) {
			Dom.removeClass(oCheckbox, sCheckboxFocusClass);
		}


		//	Defer adding key-related and click event listeners until 
		//	one of the checkboxes is initially focused.

		if (!bKeyListenersInitialized) {
			initKeyListeners.call(container);
		}

		oCheckbox = getCheckbox(matchedEl);

		Dom.addClass(oCheckbox, sCheckboxFocusClass);

	};


	var onCheckboxBlur = function (event, matchedEl) {

		if (bBlockBlur) {
			bBlockBlur = false;
			return;
		}

		var oCheckbox = getCheckbox(matchedEl);

		Dom.removeClass(oCheckbox, sCheckboxFocusClass);

		if (!bBlockClearActive && oCheckbox === oActiveCheckbox) {
			clearActiveCheckbox();
		}

		bBlockClearActive = false;

	};


	var onCheckboxMouseDown = function (event, matchedEl, container) {

		//	Defer adding mouse-related and click event listeners until 
		//	the user mouses down on one of the checkboxes.

		if (!bMouseListenersInitialized) {
			initMouseListeners.call(container);
		}

		var oCheckbox,
			oInput;


		if (matchedEl.nodeName.toLowerCase() === "label") {

			//	If the target of the event was the checkbox's label element, the
			//	label will dispatch a click event to the checkbox, meaning the 
			//	"onCheckboxClick" handler will be called twice.  For that reason
			//	it is necessary to block the "onDocumentMouseUp" handler from
			//	clearing the active state, so that a reference to the active  
			//	checkbox still exists the second time the "onCheckboxClick"
			//	handler is called.

			bBlockDocumentMouseUp = true;

			//	When the user clicks the label instead of the checkbox itself, 
			//	the checkbox will be blurred if it has focus.  Since the 
			//	"onCheckboxBlur" handler clears the active state it is 
			//	necessary to block the clearing of the active state when the 
			//	label is clicked instead of the checkbox itself.

			bBlockClearActive = true;

			oCheckbox = getCheckboxForLabel(matchedEl);

		}
		else {

			oCheckbox = matchedEl;

		}

		//	Need to focus the input manually for two reasons:
		//	1) 	Mousing down on a label in Webkit doesn't focus its  
		//		associated checkbox
		//	2)	By default checkboxes are focused when the user mouses 
		//		down on them.  However, since the actually checkbox is 
		//		obscurred by the two span elements that are used to 
		//		style it, the checkbox wont' receive focus as it was 
		//		never the actual target of the mousedown event.

		oInput = Selector.query("input", oCheckbox, true);

		//	Calling Event.preventDefault won't block the blurring of the 
		//	currently focused element in IE, so we'll use the "bBlockBlur"
		//	variable to stop the code in the blur event handler  
		//	from executing.

		bBlockBlur = (UA.ie && document.activeElement == oInput);

		oInput.focus();

		setActiveCheckbox(oCheckbox);

		//	Need to call preventDefault because by default mousing down on
		//	an element will blur the element in the document that currently 
		//	has focus--in this case, the input element that was 
		//	just focused.

		Event.preventDefault(event);

	};


	var onCheckboxClick = function (event, matchedEl) {

		var oTarget = Event.getTarget(event),
			oInput;


		if (matchedEl === oActiveCheckbox) {

			oInput = Selector.query("input", matchedEl, true);

			if (oTarget !== oInput) {

				//	If the click event was fired via the mouse the checked
				//	state will have to be manually updated since the input 
				//	is hidden offscreen and therefore couldn't be the 
				//	target of the click.

				oInput.checked = (!oInput.checked);

			}

			updateCheckedState(oInput);
			clearActiveCheckbox();

		}

	};


	var onCheckboxKeyDown = function (event, matchedEl) {

		//	Style the checkbox as being active when the user presses the 
		//	space bar

		if (Event.getCharCode(event) === 32) {
			setActiveCheckbox(matchedEl);						
		}

	};


	var checkboxes = Selector.query("#checkboxes>div>span");

	for (var i = checkboxes.length - 1; i >= 0; i--) {
		Dom.addClass(checkboxes[i], "yui-checkbox");
	}

	//	Remove the "yui-checkboxes-loading" class used to hide the 
	//	checkboxes now that the checkboxes have been skinned.	

	document.documentElement.className = "";


	//	Add the minimum number of event listeners needed to start, bind the 
	//	rest when needed

	Event.delegate("checkboxes", "mousedown", onCheckboxMouseDown, ".yui-checkbox,label");
	Event.delegate("checkboxes", "focusin", onCheckboxFocus, "input[type=checkbox]");

}());
</textarea>

<h4>Progressive Enhancement</h4>
<p>
The markup above will be transformed using both CSS and JavaScript.  To account 
for the scenario where the user has CSS enabled in their browser but JavaScript 
is disabled, the CSS used to style the checkboxes will be loaded via JavaScript 
using the 
<a href="http://developer.yahoo.com/yui/yuiloader">YUI Loader</a>.
Additionally, a small block of JavaScript will be placed in the 
<code>&#60;head&#62;</code> &#151; used to temporarily hide the markup 
while the JavaScript and CSS are in the process of loading to prevent the user 
from seeing a flash unstyled content.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
(function () {

	//	Use the YUILoader to load the JavaScript and CSS required for 
	//	skinning the checkboxes.

	var loader = new YAHOO.util.YUILoader({
	
	    require: ["event-delegate"],
	    loadOptional: true,
		base: '../../build/',
	    timeout: 10000,
		onFailure: function () {

			//	Show the checkboxes if the loader failed that way the original 
			//	unskinned checkboxes will be visible so that the user can
			//	interact with them either way.		

			document.documentElement.className = "";
			
		}
	
	});

	loader.addModule({		
		name: 'checkboxstyles',
		type: 'css',
		varName: "CheckboxCSS",
		fullpath: 'assets/checkbox.css'
	});

	loader.addModule({		
		name: 'checkboxjs',
		type: 'js',
		varName: "CheckboxJS", 
		fullpath: 'assets/checkbox.js'
	});

    loader.require(["checkboxstyles", "checkboxjs"]);
	
	loader.insert();
	
}());
</textarea>
<h2>Configuration for This Example</h2>

<p>You can load the necessary JavaScript and CSS for this example from Yahoo's servers.  <a href="http://developer.yahoo.com/yui/articles/hosting/?yuiloader&MIN#configure">Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured</a>.</p>

				</div>
				<div class="yui-u">
						<div id="loggerModule" class="yui-skin-sam">
						<h3 class="firstContent">YUI Logger Output:</h3>
								<div id="loggerGloss"><p><strong>Note:</strong> Logging and debugging is currently turned off for this example.</p> 
							<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="event-focus-blur_log.html">Reload with logging<br />
	 and debugging enabled.</a></span></span></p></div>
	
						</div>
					
				
					<div id="examples">
						<h3>Event Utility Examples:</h3>
	
						<div id="exampleToc">
							<ul>
								<li><a href='../event/eventsimple.html'>Simple Event Handling and Processing</a></li><li><a href='../event/custom-event.html'>Using Custom Events</a></li><li><a href='../event/event-timing.html'>Using onAvailable, onContentReady, and onDOMReady</a></li><li><a href='../event/event-delegation.html'>Using Event Utility and Event Delegation to Improve Performance</a></li><li class='selected'><a href='../event/event-focus-blur.html'>Skinning via Progressive Enhancement using the Event Utility and the YUILoader</a></li><li><a href='../container/keylistener.html'>Implementing Container Keyboard Shortcuts with KeyListener (included with examples for Container Family)</a></li><li><a href='../container/container-ariaplugin.html'>Using the Container ARIA Plugin (included with examples for Container Family)</a></li>							</ul>
						</div>
					</div>
					
					<div id="module">
						<h3>More Event Utility Resources:</h3>
						<ul>
							<li><a href="http://developer.yahoo.com/yui/event/">User's Guide</a> (external)</li>
						<li><a href="../../docs/module_event.html">API Documentation</a></li>
                            
                            
							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/event.pdf">Cheat Sheet PDF</a> (external)</li></ul>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="YUILibrary.com hosts the YUI community forums" href="http://yuilibrary.com/forum/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library source can be checked out from GitHub" href="http://github.com/yui/">YUI on GitHub</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Carousel Control - Functional Examples" href="../../examples/carousel/index.html">Carousel</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="selected "><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Paginator - Functional Examples" href="../../examples/paginator/index.html">Paginator</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer</a></li><li class="item"><a title="The YUI ProgressBar Control - Functional Examples" href="../../examples/progressbar/index.html">ProgressBar</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI Storage Utility - Functional Examples" href="../../examples/storage/index.html">Storage</a></li><li class="item"><a title="The YUI SWF Utility - Functional Examples" href="../../examples/swf/index.html">SWF</a></li><li class="item"><a title="The YUI SWFStore Utility - Functional Examples" href="../../examples/swfstore/index.html">SWFStore</a></li><li class="item"><a title="The YUI Stylesheet Utility - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

<script src='../../assets/YUIexamples.js'></script>


</body>
</html>
